/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-09-12 11:24:06
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-10-17 09:11:17
 * @FilePath: /react18-vite-admin/src/views/Dashboard/Dashboard.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Row, Col, Table } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { useEffect } from 'react';

import CustomCard from '@/components/ui/CustomCard/CustomCard';
import CustomChart from '@/components/ui/CustomChart/CustomChart';

import { useJianBao } from './useJianBao';
import { usePinlv } from './usePinlv';
import { useRank } from './useRank';
import './Dashboard.scoped.scss';

const Dashboard = () => {
    const { title: jianbaoTitle, jianbaoImg, list: jianbaoList } = useJianBao();
    const { title: pinlvTitle, pinlvImg, chartOption, chartData } = usePinlv();
    const { title: rankTitle, rankImg, list: rankList } = useRank();

    useEffect(() => {
        console.log('渲染')
    }, [])

    return (
        <div className="page-container">
            <CustomCard
                className="mb"
                title={
                    <div className="flex flex-row items-center ">
                        <img
                            src={jianbaoImg}
                            className="mr-[8px]"
                            style={{
                                width: '16px',
                                height: '16px'
                            }}
                        />
                        <div className="f18 c-1A1A1A">{jianbaoTitle}</div>
                    </div>
                }
                canCollapse
            >
                <Row gutter={16} style={{ marginBottom: '-16px' }}>
                    {jianbaoList.map((item, index) => {
                        return (
                            <Col span={6} key={index}>
                                <div className="card">
                                    <div className="c-475669 text-base fw700 mb8">
                                        {item.title}
                                    </div>
                                    <div className="flex flex-row items-center">
                                        <div className="c-text1 text-xl fw700">
                                            {item.value}
                                        </div>
                                        {item.diffStr ? (
                                            <span className="c-text text-sm ml5">
                                                {item.diffStr}
                                            </span>
                                        ) : (
                                            <></>
                                        )}

                                        {item.diff ? (
                                            item.diff > 0 ? (
                                                <span className="c-green text-sm ml5">
                                                    +{item.diff}%
                                                    <ArrowUpOutlined className="ml-[8px]" />
                                                </span>
                                            ) : (
                                                <span className="c-red text-sm ml5">
                                                    {item.diff}%
                                                    <ArrowDownOutlined />
                                                </span>
                                            )
                                        ) : (
                                            <></>
                                        )}
                                    </div>
                                </div>
                            </Col>
                        );
                    })}
                </Row>
            </CustomCard>

            <CustomCard
                className="mb"
                title={
                    <div className="flex flex-row items-center ">
                        <img
                            src={pinlvImg}
                            className="mr-[8px]"
                            style={{
                                width: '16px',
                                height: '16px'
                            }}
                        />
                        <div className="f18 c-1A1A1A">{pinlvTitle}</div>
                    </div>
                }
                canCollapse
            >
                <CustomChart
                    style={{ height: '343px' }}
                    extraOption={chartOption}
                    datasetSource={chartData}
                />
            </CustomCard>

            <CustomCard
                className="mb"
                title={
                    <div className="flex flex-row items-center ">
                        <img
                            src={rankImg}
                            className="mr-[8px]"
                            style={{
                                width: '16px',
                                height: '16px'
                            }}
                        />
                        <div className="f18 c-1A1A1A">{rankTitle}</div>
                    </div>
                }
                canCollapse
            >
                <Table<(typeof rankList)[0]>
                    bordered={true}
                    columns={[
                        {
                            title: '排名',
                            dataIndex: 'rank'
                        },
                        {
                            title: '用户',
                            dataIndex: 'name'
                        },
                        {
                            title: '浏览量',
                            dataIndex: 'readCount'
                        },
                        {
                            title: '收藏量',
                            dataIndex: 'collectCount'
                        },
                        {
                            title: '点赞量',
                            dataIndex: 'likeCount'
                        },
                        {
                            title: '评论量',
                            dataIndex: 'commentCount'
                        }
                    ]}
                    dataSource={rankList}
                    rowKey={(record) => record.rank}
                ></Table>
            </CustomCard>
        </div>
    );
};

export default Dashboard;
